<template>
  <div class="qrcode-demo">
    <!-- 1. 二维码组件：配置自定义参数 + 绑定ref（用于调用下载方法） -->
    <QrcodeGenerator
      ref="qrcodeRef"
      :value="qrcodeValue"
      :size="200"          
      color="#2c3e50"      
      bgColor="#f8f9fa"    
      :bordered="false"    
      errorLevel="M"      
    />

    <!-- 2. 下载按钮：触发二维码下载 -->
    <button class="download-btn" @click="handleDownload">
      下载二维码
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import QrcodeGenerator from '@/components/commons/qrCode/index.vue';
import 'element-plus/dist/index.css';

// （1）绑定组件ref：用于调用组件暴露的 downloadQrCode 方法
const qrcodeRef = ref<InstanceType<typeof QrcodeGenerator> | null>(null);

// （2）二维码内容（可动态修改，如从接口获取）
const qrcodeValue = ref("https://www.example.com?name=test&id=123");

// （3）触发下载：调用组件的下载方法
const handleDownload = () => {
  // 传自定义文件名（默认是 "QRcode.png"），无需加 .png 后缀（组件会自动补全）
  qrcodeRef.value?.downloadQrCode("我的自定义二维码");
};
</script>

<style scoped>
.qrcode-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
}

.download-btn {
  padding: 8px 16px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>